<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>JD移动端首页</title>
</head>

<body>
    <!-- 顶部区域 -->
    <header>
        <div class="app">
            <ul>
                <li>
                    <img src="./images/close.png" alt="">
                </li>
                <li>
                    <img src="./images/logo.png" alt="">
                </li>
                <li>打开京东App，购物更轻松</li>
                <li>立即打开</li>
            </ul>
        </div>
    </header>
    <!-- 搜索区域 -->
    <div class="search-wrap">
        <div class="search-btn">
            <a href="https://m.baidu.com"></a>
        </div>
        <div class="search">
            <div class="jd-icon"></div>
            <div class="sou"></div>
            <div class="search-input">
                <input type="text" placeholder="遥控飞机" autocomplete="off" maxlength="30">
            </div>
        </div>
        <div class="search-login">登录</div>
    </div>
    <!-- 主体区域 -->
    <div class="main-content">
        <!-- banner -->
        <div class="slider">
            <img src="./upload/banner.dpg" alt="">
        </div>
        <!-- 全球热爱季 -->
        <div class="brand">
            <div>
                <a href="#"><img src="./upload/brand11.jpg" alt=""></a>
            </div>
            <div class="brand-middle">
                <a href="#"><img src="./upload/brand22.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="./upload/brand33.jpg" alt=""></a>
            </div>
        </div>
        <!-- 导航区域 -->
        <nav class="nav">
            <div class="nav-item">
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
                <a href="#"><img src="./upload/nav08.dpg" alt="nav"><span>领券</span></a>
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
            </div>
            <div class="nav-item nav-item2">
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
                <a href="#"><img src="./upload/nav08.dpg" alt="nav"><span>领券</span></a>
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
                <a href="#"><img src="./upload/nav01.dpg" alt="nav"><span>京东超市</span></a>
                <a href="#"><img src="./upload/nav20.dpg" alt="nav"><span>全部</span></a>
            </div>
        </nav>

    </div>
</body>

</html>